<!-- 市场页面tab切换下面内容 -->
<template>
    <div class="component component--module tickers-bar">
        <div class="column column--full">
            <div class="element element--ticker">
                <div class="overflow--table">
                </div>
                <div class="content-wrapper">
                    <div class="list list--tickers">
                        <router-link :to="{ name: 'stockDetail', params: { symbol: item.symbol } }"
                            v-for='(item, index) in props.tickerData' :key='index'
                            :class="[tickerData.length > 0 ? 'positive' : 'negative', 'ticker__item']">
                            <span class="label">{{ item.symbol }}</span>
                            <bg-quote :class="[tickerData.length < 0 ? 'negative' : 'positive', 'value']">{{
                        (((item.close - item.open) * 100) / item.open).toFixed(
                          2
                        )
                      }}%</bg-quote>
                            <i class="icon icon--caret"></i>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// import marketLine from '../marketLine/marketLine.vue';
const props = defineProps(['tickerData'])
console.log(props)
</script>

<style scoped lang='scss'>
.component {
    max-width: 960px;
}
</style>